{% comment %}
  Renders a product card

  Accepts:
  - product_card_product: {Object} Product Liquid object (optional)
  - media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
  - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
  - add_image_padding: {Boolean} Enables padding on the image to space out the grid
  - show_vendor: {Boolean} Show the product vendor. Default: false

  Usage:
  {% render 'product-card', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{%- liquid
  assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio
  if product_card_product.featured_media.aspect_ratio == nil
    assign featured_media_aspect_ratio = 1
  endif
-%}
{%- capture image_list -%}
  {%- for product_image in product_card_product.images -%}
    {%- if product_image.variants.first.id != blank -%}
      {%- comment -%} If product image is attached to a variant, image.attached_to_variant not working! {%- endcomment -%}
      {%- unless forloop.first -%}$${%- endunless -%}
      {{ product_image.id }}::{{ product_image.position }}||{{ product_image.alt }}
    {%- else -%}
      {%- unless forloop.first -%};;{%- endunless -%}
      {{ product_image.position }}||{{ product_image.alt }}
    {%- endif -%}
  {%- endfor -%}
{%- endcapture -%}
<div class="card w-100 border-0 rounded-2 overflow-hidden as-product-card bg-transparent h-100">
  <div class="position-relative">
    <a {% if product_card_product.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ product_card_product.url | default: '#' }}" class="stretched-link"></a>
    {% if product_card_product.available %}
      {%- for variant in product_card_product.variants -%}
        {% if variant.available %}
          {% capture variant_image_strs %}
            {%- render 'get-product-images-by-variant-id', image_list: image_list, target_variant: variant, all_images: product_card_product.images -%}{% endcapture %}
          {% assign variant_image_strs = variant_image_strs | split: ';;' %}
          <figure
            data-variant-id="{{ variant.id }}"
            class="{% unless variant.id == product_card_product.first_available_variant.id %}d-none{% endunless %} rounded-2 overflow-hidden mb-0 medio {% if variant_image_strs[1] != nil and show_secondary_image != blank %}secondImg{% endif %} ratio ratio-{{ media_size }} {% if add_image_border == true %}border{% endif %}"
            {% if media_size == 'adapt' %}
            style="--se-aspect-ratio: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"
            {% endif %}>
            {%- for variant_image_str in variant_image_strs limit: 2 -%}
              {%- liquid
              assign variant_image = variant_image_str | split: '||'
              assign variant_image_pos = variant_image[0] | plus: 0 | minus: 1
              assign variant_image_alt = variant_image[1]
            -%}
              {%- assign image = product_card_product.images[variant_image_pos] -%}
              {% if image != blank %}
                {% if forloop.first == true %}
                  <picture class="{% if add_image_padding %}p-2 p-lg-3{% endif %}">
                    <img
                      srcset="{{ image | img_url: '200x' }} 200w, {{ image | img_url: '250x' }} 250w, {{ image | img_url: '310x' }} 310w, {{ image | img_url: '400x' }} 400w, {{ image | img_url: '500x' }} 500w, {{ image | img_url: '620x' }} 620w, {{ image | img_url: '750x' }} 750w, {{ image | img_url: '930x' }} 930w"
                      src="{{ image | img_url: '600x' }}"
                      sizes="(min-width: 1264px) 600px, (min-width: 1024px) 500px, (min-width: 600px) 350px, calc(100vw - 32px)"
                      alt="{{ image.alt | escape }}"
                      loading="lazy"
                      class="w-100 h-100 object-fit-cover"
                      width="{{ image.width }}"
                      height="{{ image.height }}">
                  </picture>
                {% else %}
                  {%- if variant_image_strs[1] != nil and show_secondary_image != blank -%}
                    <picture class="{% if add_image_padding %}p-3{% endif %} opacity-0">
                      <img
                        srcset="{{ image | img_url: '200x' }} 200w, {{ image | img_url: '250x' }} 250w, {{ image | img_url: '310x' }} 310w, {{ image | img_url: '400x' }} 400w, {{ image | img_url: '500x' }} 500w, {{ image | img_url: '620x' }} 620w, {{ image | img_url: '750x' }} 750w, {{ image | img_url: '930x' }} 930w"
                        src="{{ image | img_url: '600x' }}"
                        sizes="(min-width: 1264px) 600px, (min-width: 1024px) 500px, (min-width: 600px) 350px, calc(100vw - 32px)"
                        alt="{{ image.alt | escape }}"
                        loading="lazy"
                        class="w-100 h-100 object-fit-cover"
                        width="{{ image.width }}"
                        height="{{ image.height }}">
                    </picture>
                  {% endif %}
                {% endif %}
              {% else %}
                <picture class="{% if add_image_padding %}p-3{% endif %}">
                  <div class="object-fit-cover img-placeholder h-100">
                    {{ 'product-3' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
                  </div>
                </picture>
              {% endif %}
            {% endfor %}
          </figure>
        {% endif %}
      {% endfor %}
    {% else %}
      <figure class="{% unless variant == product.first_available_variant %}d-none{% endunless %} rounded-2 overflow-hidden mb-0 medio {% if product_card_product.media[1] != nil and show_secondary_image != blank %}secondImg{% endif %} ratio ratio-{{ media_size }} {% if add_image_border == true %}border{% endif %}"{% if media_size == 'adapt' %}style="--se-aspect-ratio: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}>
        {% if product_card_product.featured_media != blank %}
          <picture class="{% if add_image_padding %}p-3{% endif %}">
            <img
              srcset="{{ product_card_product.featured_media | img_url: '200x' }} 200w, {{ product_card_product.featured_media | img_url: '250x' }} 250w, {{ product_card_product.featured_media | img_url: '310x' }} 310w, {{ product_card_product.featured_media | img_url: '400x' }} 400w, {{ product_card_product.featured_media | img_url: '500x' }} 500w, {{ product_card_product.featured_media | img_url: '620x' }} 620w, {{ product_card_product.featured_media | img_url: '750x' }} 750w, {{ product_card_product.featured_media | img_url: '930x' }} 930w"
              src="{{ product_card_product.featured_media | img_url: '600x' }}"
              sizes="(min-width: 1264px) 600px, (min-width: 1024px) 500px, (min-width: 600px) 350px, calc(100vw - 32px)"
              alt="{{ product_card_product.featured_media.alt | escape }}"
              loading="lazy"
              class="w-100 h-100 object-fit-cover"
              width="{{ product_card_product.featured_media.width }}"
              height="{{ product_card_product.featured_media.height }}">
          </picture>
          {%- if product_card_product.media[1] != nil and show_secondary_image != blank -%}
            <picture class="{% if add_image_padding %}p-3{% endif %} opacity-0">
              <img
                srcset="{{ product_card_product.media[1] | img_url: '200x' }} 200w, {{ product_card_product.media[1] | img_url: '250x' }} 250w, {{ product_card_product.media[1] | img_url: '310x' }} 310w, {{ product_card_product.media[1] | img_url: '400x' }} 400w, {{ product_card_product.media[1] | img_url: '500x' }} 500w, {{ product_card_product.media[1] | img_url: '620x' }} 620w, {{ product_card_product.media[1] | img_url: '750x' }} 750w, {{ product_card_product.media[1] | img_url: '930x' }} 930w"
                src="{{ product_card_product.media[1] | img_url: '600x' }}"
                sizes="(min-width: 1264px) 600px, (min-width: 1024px) 500px, (min-width: 600px) 350px, calc(100vw - 32px)"
                alt="{{ product_card_product.media[1].alt | escape }}"
                loading="lazy"
                class="w-100 h-100 object-fit-cover"
                width="{{ product_card_product.media[1].width }}"
                height="{{ product_card_product.media[1].height }}">
            </picture>
          {% endif %}
        {% else %}
          <picture class="{% if add_image_padding %}p-3{% endif %}">
            <div class="object-fit-cover img-placeholder h-100">
              {{ 'product-3' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
            </div>
          </picture>
        {% endif %}
      </figure>
    {% endif %}
  </div>
  <div class="card-body px-0 px-lg-1 py-0 pt-3 position-relative">
    <a {% if product_card_product.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ product_card_product.url | default: '#' }}" class="stretched-link"></a>
    {%- if product_card_product.available == false -%}
      <div class="mb-2">
        <span class="gray-400 small " aria-hidden="true">
          {{ 'products.product.sold_out' | t }}
        </span>
      </div>
    {%- else -%}
      {% for variant in product_card_product.variants %}
        {% if variant.available %}
          <div data-variant-id="{{ variant.id }}" class="as-variant-badge {% unless variant == product_card_product.first_available_variant %}d-none{% endunless %}">
            {% if variant.compare_at_price > variant.price %}
              <div class="mb-2">
                <span class="text-primary small" aria-hidden="true">
                  {{ 'products.product.on_sale' | t }}
                </span>
              </div>
            {% endif %}
          </div>
        {% endif %}
      {% endfor %}

    {%- endif -%}
    <div class="card-text">
      {%- if show_vendor -%}
        <p class="mb-0 text-secondary small">{{ product_card_product.vendor }}</p>
      {%- endif -%}
      <h3 class="fw-bold mb-0 text-black" style="font-size:1rem;">{{ product_card_product.title }}</h3>
      {% render 'product-add-to-cart-form', product: product_card_product, btn_style: btn_style, text_color: text_color, index: forloop.index, show_quick_buy: show_quick_buy %}
    </div>
  </div>
  {% if show_quick_buy %}
    <div class="mt-3 mb-1 px-1" style="z-index: 2;">
      <div class="d-grid">
        <div class="mb-2">
          {% render 'add-error-message' %}
        </div>
        <button
          form="product-card-{{ section.id }}-{{ forloop.index }}"
          type="submit"
          class="as-add-to-cart-button btn btn-loading btn-sm btn-mw-sm btn-outline-{{ btn_style }} {% unless product_card_product.available %}disabled{% endunless %}">
          <span class="loading">
            <span class="spinner-border mr-2 add-to-cart-loading" role="status"></span>
          </span>
          <span class="btn-text">{{ 'products.product.add_to_cart' | t }}</span>
          <span class="success icon-wrap-sm">{% render 'icon-check' %}</span>
          <span class="error icon-wrap-sm">{% render 'icon-close' %}</span>
        </button>
      </div>
    </div>
  {% endif %}
</div>
